<!-- 维修列表 -->
<template>
  <div class="repair-record-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList">
          <el-form-item>
            <el-date-picker
              v-model="dg.ps.sedate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 205px"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-select 
              :placeholder="'维修类型'" 
              v-model="dg.ps.repairTypeId"
              clearable
              style="width: 100px">
              <el-option 
                v-for="(it, i) in repairTypeList" 
                :key="i" 
                :label="it.typeName" 
                :value="it.id">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item>
            <el-input
              style="width: 120px"
              placeholder="车牌号"
              clearable
              v-model="dg.ps.plateNum">
            </el-input>
          </el-form-item> -->

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList">
            搜索
          </el-button>
        </el-form>
      </div>

      <!-- <TableSelfSet 
        v-if="dg.columns.length > 0" 
        :tbTitle="'维修记录列表'" 
        :dgName="dg.dgName" 
        :tbId="dg.tbName" 
        :srcCols="dg.srcCols" 
        :columns="dg.columns" 
        @saveSet="saveTbSet"
      /> -->
    </div>
    
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight - 95"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'applyStime'">
            {{row.applyStime | time('yyyy年MM月dd号 HH:mm')}}
          </template>
          
          <span v-else-if="col.field == 'repairType'">
            {{row.repairTypeId && row.repairTypeId.typeName}}
          </span>

          <span v-else-if="col.field == 'repairCompany'">
            {{row.customId && row.customId.baseUserId.realName}}
          </span>

          <span v-else-if="col.field == 'linkPhone'">
            {{row.customId && row.customId.baseUserId.phone}}
          </span>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination 
      v-show="dg.total >= 0" 
      :total="dg.total" 
      :page.sync="dg.ps.page" 
      :limit.sync="dg.ps.rows" 
      @pagination="getDgList"
    />
  </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import TableSelfSet from '@/components/TableSelfSet';    
import Pagination from '@/components/Pagination';

import * as logisticsSer from "@/api/services/logistics.service";

export default {
  mixins: [ DataGridBase, DataGridResize],
  components: { TableSelfSet, Pagination },
  props: {myData: Object},
  data() { 
    let cols = [
      {label: '维修时间', field: 'applyStime', width: 140},
      {label: '维修类型', field: 'repairType', width: 80},
      {label: '修理厂', field: 'repairCompany', width: 'auto'},
      {label: '修理厂地址', field: 'applyAddress', width: 200},
      {label: '修理厂联系电话', field: 'linkPhone', width: 100},
      {label: '备注(维修项目)', field: 'note', width: 'auto'},
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'repairRecordListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 20,
          // 查询类型：0预约记录 1维修记录
          searchType: 1,
          // 预约类型，多个逗号拼接：当searchType为0时，一定传值：报停(DESTORY) 下线(DOWN)
          applyType: "",
          // 车牌号 
          plateNum: this.myData.obj.plateNum,
          // 维修类型id eg:1
          repairTypeId: '',
          // 起止日期
          sedate: [],
        },
      },

      // 维修类型列表
      repairTypeList: [],

    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();

    that.getRepairTypeList();
  },
  methods:{
    // 获取-维修类型列表
    getRepairTypeList(){
      const that = this, U = that.U;

      logisticsSer.getRepairTypeList({}).then(res => {
        if(res.code != 1){
          that.repairTypeList = [];
        }else{
          that.repairTypeList = res.repairTypes;
        }
      });
    },
    // 获取-表格列表
    getDgList(){
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
      ps.stime = (ps.sedate && ps.sedate.length == 2) ? ps.sedate[0] : '';
      ps.etime = (ps.sedate && ps.sedate.length == 2) ? ps.sedate[1] : '';
      delete ps.sedate;

      logisticsSer.applyRepairDowns(ps).then(res => {
        if(res.code == 1){
          let list = res.data;
          for(let i in list){ list[i].dgName = dg.dgName; }
      
          dg.list = list;
          dg.total = res.count;
        }else{
          dg.list = [];
          dg.total = 0;
        }
      });
    },


  },
 }
</script>